<template>
    <el-row :gutter="20" type="flex">
      <el-col :span="16">
        <NewCard title="订单列表" :isright="true">
          <template #right>
            <ComForm
              :config="config"
              :list="comForm"
              @EventOnsubmit="inquireFn"
            ></ComForm>
          </template>
          <ComTable
            @handleCurrentChange="handleCurrentChange"
            @handleSizeChange="handleSizeChange"
            :pagination="{
              total: pageing.total,
              pageNum: pageing.pageNum,
              pageSize: pageing.pageSize,
            }"
            :list="tableData"
            :modes="tableModes"
          >
            <el-table-column  width="100">
            <template slot-scope="scope">
          <span
         
            style="color: #F87A23"
            >{{selecstatus(scope.row.status)}}</span
          >
        </template>
      </el-table-column>
          </ComTable>
        </NewCard>
      </el-col>
      <el-col :span="8">
        <NewCard title="订单分析">
          <div class="analyse">
            <div class="order-chart">
              <h3>
                <p>订单额</p>
                <el-button-group>
                  <el-button
                    type="text"
                    @click="btnGroupState = 1"
                    :class="btnGroupState == 1 ? 'isActive' : ''"
                    >今日</el-button>
                  <el-button
                    type="text"
                    @click="btnGroupState = 2"
                    :class="btnGroupState == 2 ? 'isActive' : ''"
                    >昨日</el-button
                  >
                  <el-button
                    type="text"
                    @click="btnGroupState = 3"
                    :class="btnGroupState == 3 ? 'isActive' : ''"
                    >本周</el-button
                  >
                  <el-button
                    type="text"
                    @click="btnGroupState = 4"
                    :class="btnGroupState == 4 ? 'isActive' : ''"
                    >本月</el-button
                  >
                  <el-button
                    type="text"
                    @click="btnGroupState = 5"
                    :class="btnGroupState == 5 ? 'isActive' : ''"
                    >全部</el-button
                  >
                </el-button-group>
              </h3>
              <div
                class="orderAmount"
                id="orderAmount"
                style="width: 100%; height: 200px"
              ></div>
              <h3>
                <p>订单量</p>
                <el-button-group>
                  <el-button
                    type="text"
                    @click="btnGroupState = 1"
                    class="isActive"
                    >全部</el-button>
                </el-button-group>
              </h3>
              <div
                class="orderSize"
                id="orderSize"
                style="width: 100%; height: 200px"
              ></div>
              <h3>
                <p>客户量</p>
                <el-button-group>
                  <el-button
                    type="text"
                    @click="btnGroupState = 1"
                    class="isActive"
                    >全部</el-button>
                </el-button-group>
              </h3>
              <div
                class="clientSize"
                id="clientSize"
                style="width: 100%; height: 200px"
              ></div>
            </div>
          </div>
        </NewCard>
      </el-col>
    </el-row>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";
import ComForm from "@/wss/components/comForm.vue";
import ComTable from "@/wss/components/comTable.vue";
import { getorderlistapi,getselectOrderByEchartapi } from "@/wss/newApi_3-24/askAround/orderList";
import echarts from "echarts";

export default {
  props: ["masetrid"],
  components: {
    NewCard,
    ComForm,
    ComTable,
  },
  data() {
    return {
      config: {
        // border: true,
        isAdd: false,
        loading: false,
      },
      // 表单选项
      comForm: {
        modes: [
          {
            placeholder: "订单号",
            formType: "input",
            mode: "orderNo",
            label: "",
            value: "",
          },
          {
            placeholder: "用户姓名/ID",
            formType: "input",
            mode: "createdBy",
            label: "",
            value: "",
          },
          {
            placeholder: "消费类型",
            mode: "type",
            formType: "select",
            select: [
              {
                label: "法律",
                value: "1",
              },
              {
                label: "问答",
                value: "2",
              },
              {
                label: "头条",
                value: "3",
              },
              {
                label: "合同",
                value: "4",
              },
              {
                label: "咨询",
                value: "5",
              },
              {
                label: "项目",
                value: "6",
              },
              {
                label: "诉讼模拟",
                value: "20",
              },
              {
                label: "合同智审",
                value: "21",
              },
            ],
          },
          {
            placeholder: "订单状态",
            mode: "status",
            formType: "select",

            select: [
              {
                label: "已完成",
                value: "0",
              },
              {
                label: "未支付",
                value: "1",
              },
              {
                label: "已支付",
                value: "2",
              },
              {
                label: "已关闭",
                value: "-1",
              },
            ],
          },
        ],
      },

      // 分页参数
      pageing: { pageNum: 1, pageSize: 10, total: 0 },
      // 表格信息
      tableData: [],
      // 表格参数
      tableModes: [
        {
          label: "订单号",
          mode: "orderNo",
          showOverflowTooltip: true,
        },
        {
          label: "用户ID",
          mode: "userId",
          showOverflowTooltip: true,
        },
        {
          label: "用户姓名",
          mode: "nickname",
          showOverflowTooltip: true,
        },
        {
          label: "订单类型",
          mode: "type",
          effectiveStatus: true,
          options: [
            {
              l: "法律",
              v: "1",
            },
            {
              l: "问答",
              v: "2",
            },
            {
              l: "头条",
              v: "3",
            },
            {
              l: "合同",
              v: "4",
            },
            {
              l: "咨询",
              v: "5",
            },
            {
              l: "项目",
              v: "6",
            },
            {
              l: "合同智审",
              v: "20",
            },
            {
              l: "诉讼模拟",
              v: "21",
            },
          ],
        },
        {
          label: "名称",
          mode: "title",
          showOverflowTooltip: true,
        },
        {
          label: "订单金额",
          mode: "amount",
          align: "right",
          
        },
        {
          label: "创建时间",
          mode: "createdTime",
          showOverflowTooltip: true,
        },
        // {
        //   label: "订单状态",
        //   mode: "status",
        //   effectiveStatus: true,
          // options: [
          //   {
          //     l: "已完成",
          //     v: 0,
          //   },
          //   {
          //     l: "未支付",
          //     v: 1,
          //   },
          //   {
          //     l: "已支付",
          //     v: 2,
          //   },
          //   {
          //     l: "已关闭",
          //     v: -1,
          //   },
          // ],
        // },
      ],
      // 订单分析按钮状态
      btnGroupState: 1, //订单额 1今日 2昨日 3本周 4本月 5全部

      // 订单金额数据
      orderAmount: [
        { value: 1000, name: "项目" },
        { value: 2000, name: "咨询" },
        { value: 3000, name: "内容" },
      ],

      // 订单量数据
      orderSize: [
        { value: 10, name: "进行中" },
        { value: 34, name: "待支付" },
        { value: 56, name: "已完成" },
      ],

      // 订单量数据
      clientSize: [
        { value: 10, name: "新增" },
        { value: 134, name: "原有用户" },
      ],
    };
  },
  mounted() {
    this.getorderlistapifn();
    this.amountchart(); //订单金额图表
    this.sizechart(); //订单量的图表
    this.clientchart(); //客户量的图表
  },
  created() {},
  methods: {
    //消费订单查询
    async getorderlistapifn(data) {
      let { pageNum, pageSize } = this.pageing;

      let { code, rows, total } = await getorderlistapi({
        pageNum,
        pageSize,
        // userId:this.$store.getters.userId,
        userType:1,
        orderNo: data && data.orderNo,
        nickName: data && data.createdBy,
        type: data && data.type,
        status: data && data.status,
      });
      if (code != 200) return;
       //把金额的数据转换成有逗号和保留小数点两位
         let filterData =rows;
        filterData.forEach((item) => {
          if (item.amount) {
            item.amount = this.$options.filters["sumFilters"](item.amount);
          }
        });
      this.tableData = filterData;
      this.pageing.total = total;
    },
    //状态的判断
    selecstatus(value) {
      const stateMap = {
        0: "已完成 ",
        1: "未支付 ",
        2: "已支付",
        "-1": "已关闭",

      };
      return stateMap[value];
    },

    //订单金额图表
    amountchart() {
      const chartAmount = echarts.init(document.getElementById("orderAmount"));
      chartAmount.setOption({
        title: {
          show: true,
          text: `订单额`,
          textStyle: {
            color: "#909AAA",
            fontSize: 12,
          },
          textAlign: "center",
          left: "19%",
          top: "40%",
          subtext: this.amountTotal,
          subtextStyle: {
            color: "#2E405E",
            fontSize: 16,
          },
        },
        tooltip: {
          trigger: "item",
        },
        //图例
        legend: {
          orient: "vertical",
          data: this.orderAmount,
          right: "10%",
          top: "30%",
          icon: "circle",
          itemWidth: 8, //矩形宽度
          itemHeight: 8, //矩形高度
          textStyle: {
            lineHeight: 20,
          },
          //自定义图例
          formatter: (name) => {
            return this.getFormatter(name);
          },
        },
        // 自定义颜色范围
        color: ["#FA7C21", "#DFE4ED", "#39496F"],
        series: [
          {
            name: "今日订单额",
            type: "pie",
            center: ["20%", "50%"],
            radius: ["50%", "75%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 6,
            },
            // 鼠标移上去的item不会凸出了
            hoverAnimation: false,
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            data: this.orderAmount,
          },
        ],
      });
    },

    //订单量图表
    sizechart() {
      const chartSize = echarts.init(document.getElementById("orderSize"));
      chartSize.setOption({
        title: {
          show: true,
          text: `订单量`,
          textStyle: {
            color: "#909AAA",
            fontSize: 12,
          },
          textAlign: "center",
          left: "19%",
          top: "40%",
          subtext: this.sizeTotal,
          subtextStyle: {
            color: "#2E405E",
            fontSize: 16,
          },
        },
        tooltip: {
          trigger: "item",
        },
        //图例
        legend: {
          orient: "vertical",
          data: this.orderSize,
          right: "10%",
          top: "30%",
          icon: "circle",
          itemWidth: 8, //矩形宽度
          itemHeight: 8, //矩形高度
          textStyle: {
            lineHeight: 20,
          },
          //自定义图例
          formatter: (name) => {
            return this.getSizefor(name);
          },
        },
        // 自定义颜色范围
        color: ["#FA7C21", "#DFE4ED", "#39496F"],
        series: [
          {
            name: "今日订单额",
            type: "pie",
            center: ["20%", "50%"],
            radius: ["50%", "75%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 6,
            },
            // 鼠标移上去的item不会凸出了
            hoverAnimation: false,
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            data: this.orderSize,
          },
        ],
      });
    },

    //客户量图表
    clientchart() {
      const chartClient = echarts.init(document.getElementById("clientSize"));
      chartClient.setOption({
        title: {
          show: true,
          text: `订单量`,
          textStyle: {
            color: "#909AAA",
            fontSize: 12,
          },
          textAlign: "center",
          left: "19%",
          top: "40%",
          subtext: this.clientTotal,
          subtextStyle: {
            color: "#2E405E",
            fontSize: 16,
          },
        },
        tooltip: {
          trigger: "item",
        },
        //图例
        legend: {
          orient: "vertical",
          data: this.clientSize,
          right: "10%",
          top: "30%",
          icon: "circle",
          itemWidth: 8, //矩形宽度
          itemHeight: 8, //矩形高度
          textStyle: {
            lineHeight: 20,
          },
          //自定义图例
          formatter: (name) => {
            return this.getSizeClient(name);
          },
        },
        // 自定义颜色范围
        color: ["#FA7C21", "#39496F"],
        series: [
          {
            name: "今日订单额",
            type: "pie",
            center: ["20%", "50%"],
            radius: ["50%", "75%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 6,
            },
            // 鼠标移上去的item不会凸出了
            hoverAnimation: false,
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            data: this.clientSize,
          },
        ],
      });
    },

    //自定义订单金额图例的函数 用于处理每列数据
    getFormatter(name) {
      let tar;
      // this.$options.filters['sumFilters'](item.value)
      this.orderAmount.forEach((item) => {
        if (item.name == name) {
          tar = this.$options.filters["sumFilters"](item.value);
        }
      });
      return name + "        " + tar;
    },

    //自定义订单量图例的函数 用于处理每列数据
    getSizefor(name) {
      let tar;
      this.orderSize.forEach((item) => {
        if (item.name == name) {
          tar = item.value;
        }
      });
      return name + "        " + tar;
    },

    //自定义客户量图例的函数 用于处理每列数据
    getSizeClient(name) {
      let tar;
      this.clientSize.forEach((item) => {
        if (item.name == name) {
          tar = item.value;
        }
      });
      return name + "        " + tar;
    },
    inquireFn(paramsArr) {
      //  let [{ orderNo = "" },{ nickname = "" },{ type = "" },{ type = "" }] = value;
      let data = {
        orderNo: paramsArr[0].orderNo,
        nickname: paramsArr[1].nickname,
        type: paramsArr[2].type,
        status: paramsArr[3].status,
      };

      this.getorderlistapifn(data);
    },
    reset() {
      this.form = {
        // status: "",
        // type: "",
      };
      // this.pageing = { pageNum: 1, pageSize: 10,};
    },
    handleCurrentChange(pageNum) {
      this.pageing.pageNum = pageNum;
      this.getorderlistapifn();
    },
    // 页容量发生改变
    handleSizeChange(pageSize) {
      this.pageing.pageSize = pageSize;
      this.getorderlistapifn();
    },
  },
  computed: {
    //计算订单额总和
    amountTotal() {
      let sum = 0;
      this.orderAmount.forEach((item) => {
        sum = item.value + sum;
      });
      return this.$options.filters["sumFilters"](sum);
    },

    //计算订单量总和
    sizeTotal() {
      let sum = 0;
      this.orderSize.forEach((item) => {
        sum = item.value + sum;
      });
      return sum;
    },

    //计算客户量总和
    clientTotal() {
      let sum = 0;
      this.clientSize.forEach((item) => {
        sum = item.value + sum;
      });
      return sum;
    },
    // 当前页发生改变时
  },
};
</script>

<style scoped>
h3,
h4,
p,
ul,
li {
  margin: 0;
  padding: 0;
}

.el-row,
.el-row .el-col {
  height: 100%;
}

::v-deep .el-card__body {
  height: 100%;
}
::v-deep .el-card__body > div {
  height: 92%;
  overflow-y: auto;
}
::v-deep .el-card__body > div::-webkit-scrollbar {
  width: 0;
}

/* 订单列表表单 */
::v-deep .right .el-input--medium {
  width: 120px !important;
}
::v-deep .right .el-button--default {
  /* display: none; */
}

/* 订单分析 */
.analyse {
  position: relative;
}
.analyse .el-button-group {
  
}
.analyse .el-button-group .el-button {
  color: #2e405e;
  font-size: 12px;
  margin-left: 15px;
}
.analyse .el-button-group .el-button.isActive {
  color: #f87a23;
}

.analyse h3 {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  line-height: 30px;
  font-weight: 600;
  color: #2e405e;
}
</style>